<template>
  <!-- 模板页面，必须有根标签 -->
  <div class="app">
    <p class="app-text">{{ num }}</p>
    <button @click="handleClick">按钮</button>
    <!-- 3. 使用组件 -->
    <ChildComp />
    <ChildComp></ChildComp>
    <child-comp></child-comp>
    <child-comp />
  </div>
</template>

<script>
// 1. 引入组件
import ChildComp from "./views/ChildComp";
// 默认暴露一个组件配置对象
// 外面就可以引入，使用组件
export default {
  name: "App", // 组件名称：为了开发者调试工具能够看到名称
  // data在组件中必须是函数形式
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    handleClick() {
      this.num++;
    },
  },
  // 2. 注册局部组件
  components: {
    ChildComp,
  },
};
</script>

<style lang="less">
.app {
  text-align: center;
  .app-text {
    font-size: 30px;
  }
}
</style>